<template>
  <div class="wrapper-my">
      <div class="img"></div>
      <div class="header">
        <div class="head_portrait">
          <img :src="info.avatar" style="wdith:100%;heigth:100%"/>
          <p class="name">{{info.nickname}}<van-icon name="edit" /></p>
          <div class="Appointment">
            去约课
          </div>
        </div>
        <ul>
          <li>
            <p class="num">4</p>
            <p class="content">我的特色课</p>
            <p class="title">我的特色课>我的特色课</p>
          </li>
          <li>
            <p class="num">0</p>
            <p class="content">一对一辅导</p>
            <p class="title">我的一对一老师</p>
          </li>
          <li>
            <p class="num">4</p>
            <p class="content">剩余学习币</p>
            <p class="title">查看剩余学习币</p>
          </li>
        </ul>
      </div>

      <div class="invitation">
        <van-icon name="point-gift" class="icon"/>
       <div class="content">
          <p>邀请好友注册APP,享受多重好礼</p>
          <p>限时优惠,多邀多得</p>
       </div>
       <van-icon name="arrow" class="icon2"/>
      </div>
      <div class="marg"></div>
      <div class="list">
        <p class="title">课程相关</p>
        <van-grid>
          <van-grid-item icon="friends"  text="关注的老师" />
          <van-grid-item icon="star" text="我的收藏" />
        </van-grid>
      </div>
      <div class="list">
        <p class="title">课程相关</p>
        <van-grid>
          <van-grid-item icon="notes-o"  text="课程订单" />
          <van-grid-item icon="notes-o" text="会员订单" />
          <van-grid-item icon="notes-o" text="约课订单" />
        </van-grid>
      </div>
      <div class="list">
        <p class="title">课程相关</p>
        <van-grid>
          <van-grid-item icon="coupon-o"  text="优惠卷" />
          <van-grid-item icon="idcard" text="学习卡" />
          <van-grid-item icon="diamond" text="会员" />
        </van-grid>
      </div>
      <div class="list">
        <p class="title">课程相关</p>
        <van-grid>
          <van-grid-item icon="bell"  text="我的消息" />
          <van-grid-item icon="envelop-o" text="意见反馈" />
           <van-grid-item icon="service-o"  text="在线客服" />
          <van-grid-item icon="setting-o" text="设置" @click="out"/>
        </van-grid>
      </div>
      <tabs></tabs>
  </div>
</template>

<script>
import tabs from "../components/tabs";
import { getInfo } from "../request/http.js";

export default {
  components: {
    tabs
  },
  data() {
    return {
      info:[]
    }
  },
  mounted(){
    if(localStorage.getItem('token')){
      console.log(123);
    }else{
      console.log(321);
      this.$router.push('/login')
    }
    getInfo().then(res=>{
      console.log(res);
      this.info=res.data.data
    })
    
  },
  methods:{
    out(){
      this.$router.push('/outLogin')
    }
  }
};
</script>

<style lang="scss" scoped>
.wrapper-my {
  width: 100%;
  position: relative;
  
  background: #fff;
  margin-bottom: 1.45rem;
  .img {
    width: 100%;
    height: 2.5rem;
    background: url("../assets/hhh.png");
    background-size: 100% 100%;
  }
  .header {
    width: 90%;
    height: 5rem;
    background: #fff;
    position: absolute;
    top: 1.3rem;
    left: 5%;
    box-sizing: border-box;
    padding: 0.2rem;
    .head_portrait {
      width: 100%;
      height: 2rem;

      display: flex;
      position: relative;
      img {
        width: 2rem;
        height: 2rem;
        border-radius: 50%;
      }
      .name {
        flex: 1;
        line-height: 2rem;
        margin-left: 0.5rem;
        font-size: 0.5rem;
      }
      .Appointment {
        width: 1.5rem;
        height: 0.7rem;
        background: orange;
        position: absolute;
        top: 0.65rem;
        right: 0;
        border-bottom-left-radius: 0.2rem;
        border-top-left-radius: 0.2rem;
        font-size: 0.35rem;
        color: #fff;
        padding: 0.1rem;
        box-sizing: border-box;
      }
    }
    ul {
      width: 100%;
      height: 2.6rem;
      display: flex;
      list-style: none;
      li {
        flex: 1;
        height: 2.4rem;
        border: 0.01rem solid #ccc;
        box-sizing: border-box;
        margin: 0.1rem;
        text-align: center;
        .num {
          font-size: 0.7rem;
          color: orange;
          width: 100%;
        }
        .content {
          font-size: 0.4rem;
          width: 100%;
        }
        .title {
          width: 2.4rem;
          font-size: 0.35rem;
          margin-top: 0.2rem;
          color: #aaa;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
         
        }
      }
    }
  }
  .invitation{
    width: 90%;
    height: 1.8rem;
    background-image: linear-gradient(to right , rgb(250, 226, 183), rgb(255, 136, 0));
    position: absolute;
    top:6.5rem;
    left:5%;
    border-radius: .9rem;
    display: flex;
    .icon{
      font-size: 1.2rem;
      line-height: 1.8rem;
      margin-left: .2rem;
      color: #fff;
    }
    .content{
      width: 70%;
     
      height:100%;
      margin-left: .2rem;
      p{
        height: 50%;
        font-size: .4rem;
        line-height: .9rem;
        color: #fff;
      }
    }
    .icon2{
      float:right;
      color: #fff;
      font-size: 1rem;
      line-height: 1.8rem;
    }
  }
  .marg{
    width: 100%;
    margin-top: 6.5rem;
  }
  .list{
    width: 100%;
    padding: .2rem;
    box-sizing: border-box;
    background: #fff;
    .title{
      font-size: .4rem;
    }
    ::v-deep .van-icon-friends{
      color: orange;
    }
    ::v-deep .van-icon-star{
      color: orange;
    }
    ::v-deep .van-icon-coupon-o{
      color: orange;
    }
    ::v-deep .van-icon-idcard{
      color: orange;
    }
    ::v-deep .van-icon-diamond{
      color: orange;
    }
     ::v-deep .van-icon-notes-o{
      color: orange;
    }
    ::v-deep .van-icon-setting-o{
      color: orange;
    }
    ::v-deep .van-icon-service-o{
      color: orange;
    }
    ::v-deep .van-icon-bell{
      color: orange;
    }
    ::v-deep .van-icon-envelop-o{
      color: orange;
    }
  }
}
</style>